<template>
  <div>
    <section :style="{ 'background-image': 'url('+get_bgimg()+')'}">
      <div class="home">
        <el-button size="medium" type="info" @click="$router.push('/')">返回首页</el-button>
      </div>
      <div class="container">
        <div class="member">
          <div class="logo">
            <img src="../assets/login-logo.png" alt="">
          </div>
          <div class="region">
            <el-tabs type="border-card">
              <el-tab-pane label="登录">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <el-form :model="ruleLogin" status-icon :rules="rules" ref="ruleLogin" label-width="80px">
                      <el-form-item label="电子邮箱" prop="email">
                        <el-input type="email" v-model="ruleLogin.email" auto-complete="off" placeholder="xxx@qq.com"></el-input>
                      </el-form-item>
                      <el-form-item label="登录密码" prop="pass">
                        <el-input type="password" v-model="ruleLogin.pass" auto-complete="off" placeholder="******"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button style="width:100%" type="primary" @click="submitForm('ruleLogin')">登录</el-button>
                      </el-form-item>
                    </el-form>
                  </el-col>
                  <el-col :span="8">
                    <div class="auth">
                      <a href="">
                        <el-button type="primary">
                          <i class="fas fa-mobile-alt"></i> 手机号码登录</el-button>
                      </a>
                      <a href="">
                        <el-button type="success">
                          <i class="fab fa-qq"></i> 腾讯QQ登录</el-button>
                      </a>
                      <a href="">
                        <el-button type="danger">
                          <i class="fab fa-weixin"></i> 微信账号登录</el-button>
                      </a>
                      <a href="">
                        <el-button type="warning">
                          <i class="fab fa-weibo"></i> 新浪微博登录</el-button>
                      </a>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="注册">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <el-form :model="ruleRegister" status-icon :rules="rules" ref="ruleRegister" label-width="80px">
                      <el-form-item label="电子邮箱" prop="email">
                        <el-input type="email" v-model.trim="ruleRegister.email" auto-complete="off" placeholder="xxx@qq.com"></el-input>
                      </el-form-item>
                      <el-form-item label="登录密码" prop="pass">
                        <el-input type="password" v-model="ruleRegister.pass" auto-complete="off" placeholder="******"></el-input>
                      </el-form-item>
                      <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleRegister.checkPass" auto-complete="off" placeholder="******"></el-input>
                      </el-form-item>

                      <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleRegister')">提交</el-button>
                        <el-button @click="resetForm('ruleRegister')">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </el-col>
                  <el-col :span="8">
                    <div class="auth">

                      <el-button type="primary" @click="dialogPhoneForm=true">
                        <i class="fas fa-mobile-alt"></i> 手机号码注册</el-button>
                      <a href="">
                        <el-button type="success">
                          <i class="fab fa-qq"></i> 腾讯QQ注册</el-button>
                      </a>
                      <a href="">
                        <el-button type="danger">
                          <i class="fab fa-weixin"></i> 微信账号注册</el-button>
                      </a>
                      <a href="">
                        <el-button type="warning">
                          <i class="fab fa-weibo"></i> 新浪微博注册</el-button>
                      </a>

                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </section>
    <el-dialog title="手机号码注册" :visible.sync="dialogPhoneForm" width="30%">
      <el-form :model="PhoneForm" ref="PhoneForm" class="PhoneForm" :rules="rules">
        <el-form-item label="手机号码" prop="phone">
          <el-input type="text" class="phoneReg" v-model="PhoneForm.phone" auto-complete="off" placeholder="13800380000"></el-input>
          <el-button type="commit" class="send" @click="submitForm('PhoneForm')">发送验证码</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPhoneForm = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="手机号码注册" :visible.sync="dialogCodeForm" width="30%">
      <el-form :model="CodeForm" ref="CodeForm" class="CodeForm" :rules="rules">
        <el-form-item label="手机验证码" prop="code">
          <el-input type="text" class="code" v-model="CodeForm.code" auto-complete="off" placeholder="请输入手机接收到的验证码"></el-input>
          <el-button type="commit" @click="submitForm('CodeForm')">验证</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCodeForm = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 进入路由时判断当前登录状态，已登录则跳转到首页
  beforeRouteEnter(to, from, next) {
    next(VM => {
      if (VM.$AV.User.current()) {
        VM.$message.warning("你已经登录");
        VM.$router.push("/");
      }
    });
  },

  mounted() {
    this.get_bgimg();
  },
  data() {
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入电子邮箱"));
      } else {
        let patt = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        if (!patt.test(value)) {
          return callback(new Error("请输入正确的电子邮箱"));
        } else {
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleRegister.checkPass !== "") {
          this.$refs.ruleRegister.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleRegister.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleRegister: {
        email: "",
        pass: "",
        checkPass: "",
        code: ""
      },
      ruleLogin: {
        email: "",
        pass: ""
      },
      PhoneForm: {
        phone: ""
      },
      CodeForm: {
        code: ""
      },
      rules: {
        email: [{ validator: validateEmail, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        code: [{ validator: validateCode, trigger: "blur" }]
      },
      dialogPhoneForm: false,
      dialogCodeForm: false,
      pageHight:0,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if ("ruleRegister" == formName) {
            var user = new this.$AV.User();
            user.setUsername(this.ruleRegister.email);
            user.setPassword(this.ruleRegister.pass);
            user.setEmail(this.ruleRegister.email);
            user.signUp().then(function(loggedInUser) {}, function(error) {});
          }

          if ("ruleLogin" == formName) {
            this.$AV.User.logIn(this.ruleLogin.email, this.ruleLogin.pass).then(
              loginedUser => {
                this.$message.success("成功登录");
                this.$router.push("/");
              },
              error => {
                if (error.code === 211) {
                  this.$message.error("找不到这个用户");
                  return false;
                }
              }
            );
          }

          if ("PhoneForm" == formName) {
            this.$AV.Cloud.requestSmsCode(this.PhoneForm.phone).then(
              success => {
                this.dialogPhoneForm = false;
                this.dialogCodeForm = true;
              },
              error => {
                alert("发送失败");
              }
            );
          }

          if ("CodeForm" == formName) {
            this.$AV.User.signUpOrlogInWithMobilePhone(
              this.PhoneForm.phone,
              this.CodeForm.code
            ).then(
              function(success) {
                // 成功
                alert("注册成功");
                this.dialogCodeForm = false;
              },
              function(error) {
                // 失败
                alert("注册失败");
              }
            );
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    get_bgimg() {
      return "https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture";
    }
  }
};
</script>

<style scoped>
section {
  max-height: 1000px;
  min-height: 850px;
  background-repeat: no-repeat;
  background-position: left;
  background-origin: content-box;
}

.home {
  padding: 20px;
  float: right;
}

.member {
  width: 584px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 100px;
}

.member .logo {
  text-align: center;
  height: 124px;
}

.member .region {
  margin-top: 40px;
  opacity: 0.93;
}

.member .region .code {
  width: 57%;
}

.member .auth button {
  width: 150px;
  margin-bottom: 5px;
  text-align: left;
}

.member .auth button:first-child {
  margin-left: 10px;
}

.phoneReg {
  width: 50%;
}

.code {
  width: 50%;
}
</style>

